<template>
  <view class="address-picker">
    <!-- 省份选择 -->
    <picker 
      mode="selector" 
      :range="provinceList" 
      range-key="title" 
      @change="onProvinceChange"
    >
      <view class="picker-item">
        {{ selectedProvinceTitle || '请选择省份' }}
      </view>
    </picker>

    <!-- 城市选择 -->
    <picker
      mode="selector"
      :range="cityList"
      range-key="title"
      @change="onCityChange"
      :disabled="!selectedProvinceId"
    >
      <view class="picker-item">
        {{ selectedCityTitle || '请选择城市' }}
      </view>
    </picker>

    <!-- 区域选择 -->
    <picker
      mode="selector"
      :range="districtList"
      range-key="title"
      @change="onDistrictChange"
      :disabled="!selectedCityId"
    >
      <view class="picker-item">
        {{ selectedDistrictTitle || '请选择地区' }}
      </view>
    </picker>
  </view>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { fetchAddressAllApi } from '@/api/common'

const props = defineProps({
  provinceId: { type: [String, Number], default: '' },
  cityId: { type: [String, Number], default: '' },
  districtId: { type: [String, Number], default: '' }
})

const emit = defineEmits(['updateAddress'])

// 数据列表
const provinceList = ref([])
const cityList = ref([])
const districtList = ref([])

// 选中的值
const selectedProvinceId = ref(null)
const selectedCityId = ref(null)
const selectedDistrictId = ref(null)

const selectedProvinceTitle = ref('')
const selectedCityTitle = ref('')
const selectedDistrictTitle = ref('')

// 获取地址数据
const getAddressList = async () => {
  try {
    const res = await fetchAddressAllApi()
    provinceList.value = res.data || []
    initSelectedValues()
  } catch (error) {
    console.error('获取地址数据失败:', error)
  }
}

// 初始化选中值
const initSelectedValues = () => {
  if (!props.provinceId) return
  
  // 初始化省份
  const province = provinceList.value.find(p => p.id == props.provinceId)
  if (province) {
    selectedProvinceId.value = province.id
    selectedProvinceTitle.value = province.title
    cityList.value = province.child || []
    
    // 初始化城市
    if (props.cityId) {
      const city = cityList.value.find(c => c.id == props.cityId)
      if (city) {
        selectedCityId.value = city.id
        selectedCityTitle.value = city.title
        districtList.value = city.child || []
        
        // 初始化区域
        if (props.districtId) {
          const district = districtList.value.find(d => d.id == props.districtId)
          if (district) {
            selectedDistrictId.value = district.id
            selectedDistrictTitle.value = district.title
          }
        }
      }
    }
  }
}

// 上报选中值
const emitSelectedAddress = () => {
  emit('updateAddress', {
    provinceId: selectedProvinceId.value,
    cityId: selectedCityId.value,
    districtId: selectedDistrictId.value,
    provinceName: selectedProvinceTitle.value,
    cityName: selectedCityTitle.value,
    districtName: selectedDistrictTitle.value
  })
}

// 选择事件
const onProvinceChange = (e) => {
  const province = provinceList.value[e.detail.value]
  selectedProvinceId.value = province.id
  selectedProvinceTitle.value = province.title
  selectedCityId.value = null
  selectedCityTitle.value = ''
  selectedDistrictId.value = null
  selectedDistrictTitle.value = ''
  cityList.value = province.child || []
  districtList.value = []
  emitSelectedAddress()
}

const onCityChange = (e) => {
  const city = cityList.value[e.detail.value]
  selectedCityId.value = city.id
  selectedCityTitle.value = city.title
  selectedDistrictId.value = null
  selectedDistrictTitle.value = ''
  districtList.value = city.child || []
  emitSelectedAddress()
}

const onDistrictChange = (e) => {
  const district = districtList.value[e.detail.value]
  selectedDistrictId.value = district.id
  selectedDistrictTitle.value = district.title
  emitSelectedAddress()
}

// 监听props变化
watch(() => [props.provinceId, props.cityId, props.districtId], 
  () => initSelectedValues(),
  { immediate: true }
)

onMounted(() => {
  getAddressList()
})
</script>

<style scoped lang="scss">
.address-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.picker-item {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
}
</style>